<template>
	<view class="pageWidth">
			<view style="background: #F3F4F8;">
				<view class="botttom">
					<button open-type="contact" class="botttomLeft">
						<view class='online'>
							<view class='line'>在线客服</view>
							<view class='time'>工作日：08:30~17:30</view>
						</view>
						<view class='kefu'>
							<image src="https://ayh.wissun.net/static/newhome/img/kefus.png" ></image>
						</view>
					</button>
					<button class="botttomLeft" @click="phoneEvent">
						<view class='online'>
							<view class='line'>服务热线</view>
							<view class='phone'>{{phoneNumber}}</view>
							<view class='tops'>08:30~17:30</view>
						</view>
						<view class='kefu'>
							<image src="https://ayh.wissun.net/static/newhome/img/phoneincon.png" ></image>
						</view>
					</button>
				</view>
			</view>
	      
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber: "400-6611-111"
			}
		},
		methods: {
			phoneEvent() {
				uni.makePhoneCall({
					phoneNumber: this.data.phoneNumber
				});
			},
		}
	}
</script>

<style>
.pageWidth {
    background: #fff;
}

.pageBody {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0px 0px;
    padding: 30rpx;
 
}
.bar {
    margin-top: 20rpx;
    width: 100%;
    height: 140rpx;
    background-color: #ffffff;
    color: #101223;
    font-size: 30rpx;
    font-weight: bold;
    display: flex;
    overflow-x: auto;
    border-radius: 0px 0px 30rpx 30rpx;
}
.info {
    margin-right: 80rpx;
    flex-shrink: 0;
}

.imgs {
    margin: 0rpx auto 8rpx auto;
    width: 46rpx;
    height: 45rpx;
}
.imgs image {
    width: 100%;
    height: 100%;
}
.barBlockStyle {
    color: #101223 !important;
}
.leftBorder {
    margin: -15rpx auto 0 auto;
    width: 56rpx;
    height: 8rpx;
}
.leftBorder image {
    width: 100%;
    height: 100%;
}
.titleBlock {
    width: 92%;
    margin: 0 4%;
    font-size: 32rpx;
    color: #101010;
    width: 100%;
    border-bottom: 1rpx solid #EEEFEF;
    line-height: 100rpx;
    padding: 0 25rpx;
}

.questionBlock {
    display: flex;
}
.rightIcon {
    color: #A4A5A5;
    line-height: 100rpx;
}
.question {
    font-size: 32rpx;
    line-height: 100rpx;
    color: #101010;
}
.describe {
    color: #A4A5A5;
    font-size: 24rpx;
    margin-left: 36rpx;
}
.btn1-position {
    position: fixed;
    bottom: 120rpx;
}

.btn2-position {
    position: fixed;
    bottom: 0;
}

.second-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1110;
    opacity: 0;
    outline: 0;
    text-align: center;
    -ms-transform: scale(1.185);
    transform: scale(1.185);
    backface-visibility: hidden;
    perspective: 2000upx;
    transition: all 0.3s ease-in-out 0s;
    pointer-events: none;
}

.second-modal::before {
    content: "\200B";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.second-modal.show {
    opacity: 1;
    transition-duration: 0.3s;
    -ms-transform: scale(1);
    transform: scale(1);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
}

.second-dialog {
    margin-top: 10rpx;
}

.secondBlock {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 10rpx;
    border-bottom: 1rpx solid #eeeeee;
}
.rights image {
    width: 13rpx;
    height: 22rpx;
}
.secondQuestion {
    font-size: 28rpx;
    color: #101223;
}
.secondTitle {
    font-size: 28rpx;
    color: #101223;
}


.botttom {
    width: calc(100% - 30rpx);
    margin: 0 auto;
    display: flex;
    padding: 30rpx 0px;
    background: #fff;
    justify-content: space-between;
    /* border-radius: 0px 0px 30rpx 30rpx; */
}

.botttomLeft {
    background-color: #fff;
    padding: 30rpx 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(50% - 30rpx) !important;
    height: 213rpx;
    background-image: url("https://ayh.wissun.net/static/newhome/img/onlinebg.png"); 
    background-size: 100% 100%;
}
.botttomLeft image{
    width: 100%;
    height: 100%;
}
.line {
    font-size: 36rpx;
    color: #fff;
    font-weight: bold;
    text-align: left;
}
.time {
    margin-top: 5rpx;
    font-size: 30rpx;
    color: #fff;
    text-align: left;
}
.phone {
    margin-top: -5rpx !important;
    font-size: 24rpx;
    color: #fff;
    text-align: left;
}
.tops {
    margin-top: -10rpx !important;
    font-size: 30rpx;
    color: #fff;
    text-align: left;
}
.kefu image {
    width: 72rpx;
    height: 72rpx;
}
button {
    margin: 0;
    padding: 0;
}
</style>
